<template>
  <div class="backgroundColor1 container fixed mychangeRecord">
    <Header content="充提记录"></Header>
    <div>
      <tab :line-width="3" custom-bar-width="60px" v-model="indexTab">
        <tab-item :selected="indexTab == 0" class="font15" @on-item-click="clickTabItem">充币记录</tab-item>
        <tab-item :selected="indexTab == 1" class="font15" @on-item-click="clickTabItem">提币记录</tab-item>
      </tab>
    </div>
    <div class="backgroundColor tabContain">
      <scroller
        :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
        :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
        lock-x
        height="-90"
        ref="scrollerIncome"
        @on-pullup-loading="onScrollBottom()"
        :use-pullup="true"
        :use-pulldown="true"
        @on-pulldown-loading="onScrollTop()"
      >
        <div class="tabContainWrap">
          <div v-for="item,index in list">
            <div class="flex">
              <div class="font15">
                {{item.direction | type}} {{item.areamark}}
              </div>
              <div class="font18" :class="{'greenRecord':item.direction == 1,'redRecord':item.direction == 2}">
                {{indexTab==1?'-':'+'}}{{item.numbers}} {{item.areamark}}
              </div>
            </div>
            <div class="font13 clear" style="margin: 8px 0 10px;color:#BBBBC0;">
              <div style="float: left;">交易哈希:</div>
              <input type="text" readonly :id="'item'+index" style="opacity: 0;position: absolute;left: -1000px;" v-model="item.tx_id">
              <!--<div type="text" :id="'item'+index" style="opacity: 0;position: absolute;left: -1000px;">{{item.address}}</div>-->
              <div
                style="float: right;width:calc(100% - 60px);position: relative;"
                data-clipboard-action="copy"
                :id="'item'+index"
                :data-clipboard-target="'#item'+index"
                @click="copy(index)"
              >
                <span style="word-break: break-all;">{{item.tx_id | txIdSlice}}</span>
                <span
                  style="color: #647DFF;" v-if="item.tx_id">复制</span>
              </div>
            </div>
            <div class="flex font13" style="color: #6F707A;">
              <span :class="{'redRecord':item.state == 2}">{{item.state | state}}</span>
              <span>{{item.inputtime}}</span>
            </div>
          </div>
          <div v-if="list.length==0" style="text-align: center;height: 300px;line-height: 300px;margin-left: -18px;border-bottom: none">
            暂无数据
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
  import Header from '../common/header.vue'
  import Clipboard from 'clipboard';
  import {Tab,TabItem,Scroller } from 'vux'
  export default{
    data(){
      return {
        indexTab:0,
        list:[{}],
        onFetching:false,
        onFetching1:false,
        page:{
          total:0,
          pageno:1,
          pagesize:10
        },
        getBarWidth: function (index) {
          return (index + 1) * 22 + 'px'
        },
        direction:1,// 1充 2提
      }
    },
    methods:{
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.page.page = 1;
          this.list = [];
          this.walletrecord('pullDown');
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
          that.page.page ++;
          this.walletrecord('pullUp');
        }
      },
      clickTabItem(){
        this.list = [];
        this.page.page = 1;
        this.walletrecord('pullDown');
      },
      walletrecord(type){
        this.loading(true);
        this.service('walletrecord',{
          direction:this.indexTab + 1,
          pageno:this.page.page,
          pagesize:this.page.pagesize
        },'post').then((res)=>{
          this.loading(false);
          this.list =  [...this.list,...res.data.list];
          this.page.total = Math.ceil (res.data.total / this.page.pagesize);
          this.$nextTick(() => {
            if(this.page.total == 0 || (this.page.total == this.page.page)){
              this.$refs.scrollerIncome.disablePullup();
              this.$refs.scrollerIncome.reset({top:0});
            }else{
              if(type === 'pullDown'){
                this.$refs.scrollerIncome.reset({top:0});
              }
              this.$refs.scrollerIncome.donePulldown();
              this.$refs.scrollerIncome.enablePullup();
            }
          })
          this.onFetching = false;
          this.onFetching1 = false;
        })
      },
      copy(index){
        var that = this;
        this.copyBtn = new Clipboard('#item'+index);
        let clipboard = this.copyBtn;
        clipboard.on('success',(res)=> {
          that.toastFn('复制成功','','success');
          clipboard.destroy();
          that.$emit('copySuccess')
        })
        clipboard.on('error', ()=>{
          that.toastFn('复制失败，请手动复制');
          clipboard.destroy()
        })
      }
    },
    created(){
//      this.currency_id = JSON.parse(sessionStorage.getItem('accountsList')).currency_id;
      this.onScrollTop();
    },
    components:{
      Header,
      Tab,
      TabItem,
      Clipboard,
      Scroller
    },
    filters:{
      txIdSlice(data){
        if(!data){
          return '无'
        }
        var data1 = data.slice(0,6)+'...'+data.slice(data.length-6,data.length)
        return data1
      }
    }
  }
</script>
<style>
  .mychangeRecord .vux-tab{
    background: #1F1F28;
  }
  .mychangeRecord .vux-tab .vux-tab-item{
    background:none;
  }
  .tabContain .tabContainWrap{
    margin-left: 18px;
  }
  .tabContain .tabContainWrap>div{
    padding:12px 18px 12px 0;
    border-bottom: 1px solid #3A3A47;
  }
  .redRecord{
    color:#F5646E;
  }
  .greenRecord{
    color:#14DC87;
  }
</style>
